<template>
    <el-row :gutter="40" style="margin-left: -10px; margin-top: 3px; margin-right: 0px;">
        <el-col :span="12">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in images" :key="item">
                    <img :src="'http://localhost:81/' + item.url" class="img-object" justify="center" />
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <el-col :span="12">
            <el-descriptions class="margin-top" title="热门酒店推荐" :column="3" :size="size" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon><Place /></el-icon>
                            酒店
                        </div>
                    </template>
                    维也纳酒店
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone />
                            </el-icon>
                            电话
                        </div>
                    </template>
                    27715648
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <location />
                            </el-icon>
                            地点
                        </div>
                    </template>
                    湖南
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            酒店等级
                        </div>
                    </template>
                    <el-tag size="small">5星级</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <office-building />
                            </el-icon>
                            Address
                        </div>
                    </template>
                    维也纳酒店位于湖南省长沙市木莲西路429号
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="margin-top" title="" :column="3" :size="size" border style="margin-top: 5px;">
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon><Place /></el-icon>
                            酒店
                        </div>
                    </template>
                    温德姆酒店
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <iphone />
                            </el-icon>
                            电话
                        </div>
                    </template>
                    27715464
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <location />
                            </el-icon>
                            地点
                        </div>
                    </template>
                    湖南     
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <tickets />
                            </el-icon>
                            酒店等级
                        </div>
                    </template>
                    <el-tag size="small">5星级</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <office-building />
                            </el-icon>
                            Address
                        </div>
                    </template>
                    温德姆酒店位于湖南省长沙市湘府中路48号
                </el-descriptions-item>
            </el-descriptions>
        </el-col>
        
    </el-row>
    <el-row :gutter="20" style="margin-left: 0px; margin-right: 10px; height: 300px;">
        <el-col :span="8" style="height: 100%;">
            <div style="height: 100%;"><img style="height: 100%; width: 100%;" src="../../../src/assets/image/hotelPage/hotel1.jpg"></div>
        </el-col>
        <el-col :span="8">
            <div style="height: 100%;"><img style="height: 100%; width: 100%; max-height: 300px;" src="../../../src/assets/image/hotelPage/hotel2.jpg"></div>
        </el-col>
        <el-col :span="8">
            <div style="height: 100%;"><img style="height: 100%; width: 100%; max-height: 300px;" src="../../../src/assets/image/hotelPage/hotel3.jpg"></div>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-statistic title="用户日浏览量" :value="2000 + '+'" />
        </el-col>
        <el-col :span="6">
            <el-statistic title='用户好评率' :value="98 + '%+'" />
        </el-col>
        <el-col :span="6">
            <el-statistic title="目前已收录的酒店" :value="300 + '+'" />
        </el-col>
        <el-col :span="6">
            <el-statistic title="目前已收到的预订" :value="999 + '+'">
                <template #suffix>
                    <el-icon style="vertical-align: -0.125em">
                        <ChatLineRound />
                    </el-icon>
                </template>
            </el-statistic>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="8">
            <div>
                <el-row>
                    <el-col :span="8">
                    <a href="https://baozhang.baidu.com/guarantee/?fid=nHcznjm3PH6vnHmdnHn3nHmLnjwxnH6snNtk&ch=4&bd_vid=10376685436895559015&bd_bxst=EiaK6rB3ojk4ulbFKsDD02osf6Do2fs00000001asq5r1egP_togYon0000000000000JJvdj0UlXQnK0000cX7BrKD000KZbV2cU6000KD0m0Dns_5H1_L3dUe5VTv12nQjYtePSPyS1egP_z1QEnvSz2EKGoHzdrzeGTAJ1x6od_XevtQjYt300ZpcQY0"><el-icon :size="50"><Service /></el-icon></a>
                </el-col>
                
                <el-col :span="16">
                    <div style="text-align: left;">协助维权</div>
                    <div style="font-size: 10px; text-align: left;">蒙受经济损失，可申请中南大学协助</div>
                </el-col>
                </el-row>            
            
            </div>          
        </el-col>
        <el-col :span="8">
            <div>
                <el-row>
                    <el-col :span="8">
                        <a href="https://baozhang.baidu.com/guarantee/?fid=nHcznjm3PH6vnHmdnHn3nHmLnjwxnH6snNtk&ch=4&bd_vid=10376685436895559015&bd_bxst=EiaK6rB3ojk4ulbFKsDD02osf6Do2fs00000001asq5r1egP_togYon0000000000000JJvdj0UlXQnK0000cX7BrKD000KZbV2cU6000KD0m0Dns_5H1_L3dUe5VTv12nQjYtePSPyS1egP_z1QEnvSz2EKGoHzdrzeGTAJ1x6od_XevtQjYt300ZpcQY0"><el-icon size="50"><WarningFilled /></el-icon></a>
                </el-col>
                
                <el-col :span="16">
                    <div style="text-align: left;">虚假赔偿</div>
                    <div style="font-size: 10px; text-align: left;">遇到品牌或资质冒用，可申请百度保障</div>
                </el-col>
                </el-row>            
            
            </div>          
        </el-col>
        <el-col :span="7">
            <div>
                <el-row>
                    <el-col :span="8">
                        <a href="https://baozhang.baidu.com/guarantee/?fid=nHcznjm3PH6vnHmdnHn3nHmLnjwxnH6snNtk&ch=4&bd_vid=10376685436895559015&bd_bxst=EiaK6rB3ojk4ulbFKsDD02osf6Do2fs00000001asq5r1egP_togYon0000000000000JJvdj0UlXQnK0000cX7BrKD000KZbV2cU6000KD0m0Dns_5H1_L3dUe5VTv12nQjYtePSPyS1egP_z1QEnvSz2EKGoHzdrzeGTAJ1x6od_XevtQjYt300ZpcQY0"><el-icon size="50"><Select /></el-icon></a>
                </el-col>
                
                <el-col :span="16">
                    <div style="text-align: left;">欺诈赔偿</div>
                    <div style="font-size: 10px; text-align: left;">遇到欺诈，经核查属实，可申请保障退还费用</div>
                </el-col>
                </el-row>            
            
            </div>          
        </el-col>
        <el-col>
            
        </el-col>
    </el-row>
    
</template>
<style scoped>
.el-col {
    text-align: center;
}
.app-main{
    background-image: url("../../../assets/image/loginPage/login_back.jpg");
}

</style>
<script setup>
const images = ref([
    {
        url: 'src/assets/image/hotelPage/hotel1.jpg'
    },
    {
        url: 'src/assets/image/hotelPage/hotel2.jpg'
    },
    {
        url: 'src/assets/image/hotelPage/hotel1.jpg'
    },
    {
        url: 'src/assets/image/hotelPage/hotel2.jpg'
    },

])
</script>
  
<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.img-object{
            object-fit: cover;
            object-position: 50% 20%;
        }
</style>